<template>
  <div class="inter">
    <mem-search-item-sec-top :text="text" :icon="icon"></mem-search-item-sec-top>
    <ul class="main_d">
      <li v-show="item.top">
        <p>总代理</p>
        <p>ID:{{item.selectId}}</p>
      </li>
      <li>
        <p>上三级</p>
        <p>ID:{{item.up3}}</p>
      </li>
      <li>
        <p>上二级</p>
        <p>ID:{{item.up2}}</p>
      </li>
      <li>
        <p>上一级</p>
        <p>ID:{{item.up1}}</p>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import MemSearchItemSecTop from '@/components/spread/MemSearchItemSecTop.vue';

  export default {
    /** kebab-case */
    name: 'mem-search-item-sec',

    data () {
      return {
        text: this.item.name + '的上级',
        icon: 'up_sx'
      };
    },
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    components: {MemSearchItemSecTop},
    methods: {
      getIcon (icon) {
        return Public.ossImg + icon + '.svg';
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate () {
      /** 可以在这加个loading事件，在加载实例时触发 */
      // 这个阶段实例的data、methods是读不到的
    },
    created () {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .main_d li {
    flex-x();
    height vw(32px);
    bor-t(#f5f5f5, 1px);
  }

  .inter {
    width 100%;
    flex-y();
    justify-content flex-start
    padding 0 6vw;
    background #fff;
    box-sizing: border-box;
    align-items stretch;
    border-radius 3vw
  }

  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()
</style>
